<template>
  <div class="wrapper">
    <v-head></v-head>
    <div class="content" :span="24">
      <v-sidebar></v-sidebar>
      <el-col :span="19" class="manContent">
        <v-navbar></v-navbar>
        <router-view></router-view>
      </el-col>
    </div>
  </div>
</template>

<style scoped>
  .wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    top: 60px;
    overflow-x: hidden;
  }
  .manContent {
    width: 100%;
    height: 100%;
    margin: 10px 10px 10px 310px;
    padding: 5px;
  }
  .navigation{
    width: 100%;
    height: 30px;
    padding: 20px;
  }
</style>
<script>
  import vHead from './Head.vue';
  import vSidebar from './Silderbar.vue';
  import vFooter from './Foot.vue';
  import vNavbar from './NavBar.vue';
  export default {
    components: {
      vHead, vSidebar, vFooter, vNavbar
    },
    data(){
        return {
        }
    }
  }
</script>
